<template>
  <!--搜索-->
  <el-form>
    <el-form-item>
      <el-select v-model="mid" placeholder="请选择地点">
        <el-option label="" value=""></el-option>
        <el-option
          v-for="item in findMidList"
          :key="item.id"
          :label="item.address"
          :value="item.id"
        />
      </el-select>
      <el-select v-model="id" placeholder="请选择电站" @click="powerLists(mid)">
        <el-option label="" value=""></el-option>
        <el-option
          v-for="item in findPowerList"
          :key="item.id"
          :label="item.powerName"
          :value="item.id"
        />
      </el-select>

      <el-select v-model="status" placeholder="请选择电柜状态">
        <el-option label="" value=""></el-option>
        <el-option label="正常" value="0" :key="0"></el-option>
        <el-option label="损坏" value="1" :key="1"></el-option>
      </el-select>
      <el-button type="primary" @click="findAll">查询</el-button>
    </el-form-item>
  </el-form>
  <!--添加电柜-->
  <el-button type="primary" @click="addManagerPower">添加电柜</el-button>
  <!--电柜列表-->
  <el-table :data="tableData.records" style="width: 100%">
    <el-table-column prop="address" label="位置" />
    <el-table-column prop="powerName" label="所属电站" />
    <el-table-column prop="pname" label="电柜编号" />
    <el-table-column prop="status" label="电瓶状态">
      <template #default="scope">
        <el-tag v-if="scope.row.status === 0" type="success">正常</el-tag>
        <el-tag v-else-if="scope.row.status === 1" type="warning">损坏</el-tag>
      </template>
    </el-table-column>
    <el-table-column>
      <template #default="scope">
        <el-button type="success" @click="handleEdit(scope.row.id)">
          修改状态
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--修改电柜状态-->
  <el-dialog v-model="dialogVisible" title="Tips">
    <span>
      <el-form>
        <el-form-item>
          <el-radio-group v-model="findPowerStates.status">
            <el-radio :value="0" :label="0">正常</el-radio>
            <el-radio :value="0" :label="1">损坏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateStates">提交</el-button>
      </div>
    </template>
  </el-dialog>
  <!--添加电柜信息-->
  <el-dialog v-model="dialog" title="Tips">
    <span>
      <el-form>
        <el-form-item>
          <el-select v-model="savePower.pid" placeholder="请选择地点">
            <el-option label="" value=""></el-option>
            <el-option
              v-for="item in findMidList"
              :key="item.id"
              :label="item.address"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialog = false">取消</el-button>
        <el-button type="primary" @click="subManagerPower">提交</el-button>
      </div>
    </template>
  </el-dialog>

  <!--分页-->
  <div>
    <el-pagination
      :current-page="tableData.currents"
      :page-size="tableData.size"
      :page-sizes="[1, 2, 3, 4, 10, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { midList, powerList, powerStatesList } from '@/api/manager'
import {
  addManagerPowers,
  managerPowerFindId,
  managerPowerList,
  updatePowerState,
} from '@/api/managerPower'
import { ElMessage } from 'element-plus'
const offsets = ref(1)
const pageSizes = ref(3)
const mid = ref()
const id = ref()
const pid = ref()
const status = ref()
const tableData = ref([])
const findMidList = ref()
const findPowerList = ref()
const findPowerStatesList = ref()
const findPowerStates = ref()
const savePower = ref({ pid: '' })
const dialogVisible = ref(false)
const dialog = ref(false)

// 添加电柜信息
function addManagerPower() {
  dialog.value = true
}
function subManagerPower() {
  console.log('savePower.value=====', savePower.value)
  addManagerPowers(savePower.value).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: '添加成功',
        type: 'success',
      })
    }
    dialog.value = false
    findAll()
  })
}

// 查询选择的电柜信息
function handleEdit(id) {
  console.log('id=====', id)
  managerPowerFindId(id).then(res => {
    console.log('res=====', res.result)
    dialogVisible.value = true
    findPowerStates.value = res.result
    console.log('findPowerStates.value=====', findPowerStates.value)
  })
}

// 分页
function handleSizeChange(val) {
  console.log(`${val} items per page`)
  pageSizes.value = val
  findAll()
}
function handleCurrentChange(val) {
  offsets.value = val
  findAll()
  console.log(`current page: ${val}`)
}

// 查询所有电柜信息
function findAll() {
  managerPowerList(
    offsets.value,
    pageSizes.value,
    mid.value,
    id.value,
    pid.value,
    status.value
  ).then(res => {
    if (res.code === 200) {
      tableData.value = res.result
      console.log('status==========', status.value)
      console.log(res.result)
    }
  })
}

// 查询所有地点
function midLists() {
  midList().then(res => {
    findMidList.value = res.result
    console.log('findMidList.value=====', findMidList.value)
  })
}

// 查询某个地点的电柜
function powerLists(mid) {
  powerList(mid).then(res => {
    findPowerList.value = res.result
    console.log('findMidList.value=====', findMidList.value)
  })
}

// 查询某个电柜的状态
function powerStatesLists(id) {
  powerStatesList(id).then(res => {
    findPowerStatesList.value = res.result
    console.log('findMidList.value=====', findMidList.value)
  })
}

// 修改电柜状态
function updateStates() {
  updatePowerState(findPowerStates.value).then(res => {
    if (res.code === 200) {
      ElMessage.success('修改成功')
      findAll()
      dialogVisible.value = false
    } else {
      ElMessage.error('修改失败')
    }
  })
}

midLists()
powerStatesLists()

findAll()
</script>

<style scoped></style>
